<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>Video_Cat</title>
    <link href="https://cdn.bootcss.com/video.js/7.6.5/alt/video-js-cdn.min.css" rel="stylesheet">
</head>
<style>
*{
	margin: 0;
	padding: 0;
}
html,body,#example-video{
	width: 100%;
	height: 100%;
	}
input{
    height: 30px;
    width: 80%;
    background-repeat: no-repeat;
    background-position: left;
    text-indent: 3.3em;
    border: 2px solid #000000;
    border-right: none;
}
button{
    height: 30px;
    width: 18%;
    background-color: #2196F3;
    font-size: 16px;
    font-family: "Century Gothic";
    color: #fff;
    border: none;
}
</style>
<body>
<div id="hide" style="display: none;">
<input type="text" placeholder="请输入视频URL,支持mp4/m3u8/webm/ogv" id="videourl">
<button type="button" onclick="to()">播放</button>
<br><br>
</div>
<video id="example-video" class="video-js vjs-default-skin" autoplay controls>
    <source id="videoid" src="https://leshi.cdn-zuyida.com/20170707/Bk6E9C6Q/index.m3u8" type="application/x-mpegURL">
</video>
</body>
<script src="https://cdn.bootcss.com/video.js/7.6.5/alt/video.core.min.js"></script>
<script src="https://cdn.bootcss.com/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>
<script>
    if (window.location.href.indexOf("?") != -1) {
        document.getElementById("videoid").src=window.location.search.substr(1);
    }else{
        document.getElementById("hide").style.display = "block";
    }
    var player = videojs('example-video');
    player.play();
   function to(){
        var videourl=document.getElementById('videourl').value;
        if(videourl!==""){
            window.location.href='?'+videourl;
        }
    }
</script>
</html>